import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 配置项目路由
const router = new VueRouter({
    mode: 'history',
    routes: [{
            path: '/',
            redirect: '/home' // 重定向
        },
        {
            path: '/home', //首页
            name: 'Home',
            component: () =>
                import ('@/views/Home'),
            meta: { // 用来判断该组件对应的页面是否显示底部tabbar
                isShowTabbar: true
            },
            children: [{
                path: 'searchPopup',
                name: 'SearchPopup',
                component: () =>
                    import ('@/views/SearchPopup')
            }]
        },
        {
            path: '/topic', //专题
            name: 'Topic',
            component: () =>
                import ('@/views/Topic'),
            meta: { // 用来判断该组件对应的页面是否显示底部tabbar
                isShowTabbar: true
            },
        },
        {
            path: '/category', //分类
            name: 'Category',
            component: () =>
                import ('@/views/Category'),
            meta: { // 用来判断该组件对应的页面是否显示底部tabbar
                isShowTabbar: true
            },
        },
        {
            path: '/cart', //购物车
            name: 'Cart',
            component: () =>
                import ('@/views/Cart'),
            meta: { // 用来判断该组件对应的页面是否显示底部tabbar
                isShowTabbar: true
            },
        },
        {
            path: '/user', //我的
            name: 'User',
            component: () =>
                import ('@/views/User'),
            meta: { // 用来判断该组件对应的页面是否显示底部tabbar
                isShowTabbar: true
            },
        },
        {
            path: '/productDetail', //产品详情
            name: 'ProductDetail',
            component: () =>
                import ('@/views/ProductDetail')
        },
        {
            path: '/channel', // 产品分类页面（从首页类别点进去如 居家-餐厨-配件。。。 ）
            name: 'Channel',
            component: () =>
                import ('@/views/Channel.vue')
        },
    ]
})

//解决路由报错的问题
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch((err) => err);
};

// 路由前置守卫
router.beforeEach((to, from, next) => {
    // 有token就表示已经登录
    // 想要进入购物车页面，必须有登录标识token
    // console.log('to:', to)
    // console.log('from:', from)
    let token = localStorage.getItem('token')
    if (to.path == '/cart') {
        // 此时必须要有token
        if (token) {
            next(); // next()去到to所对应的路由界面
        } else {
            Vue.prototype.$toast('请先登录');
            // 定时器
            setTimeout(() => {
                next("/user"); // 强制去到"/user"所对应的路由界面
            }, 1000);
        }
    } else {
        // 如果不是去往购物车的路由，则直接通过守卫，去到to所对应的路由界面
        next()
    }
})
export default router